<template>
  <div class="formSelect">
    <el-form-item :label="title">
      <el-select
        v-model="selectval"
        :clearable="type !== '21'"
        :placeholder="content"
        filterable
        size="mini"
        :style="{ width: ww }"
        @change="handleValue"
      >
        <span v-if="type === '12'">
          <el-option
            v-for="item in data"
            :key="item.serviceId"
            :label="item.serviceName"
            :value="item.serviceId"
          >
          </el-option>
        </span>
        <span v-else>
          <el-option
            v-for="item in data"
            :key="item.id"
            :label="item.lable"
            :value="item.id"
          ></el-option>
        </span>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'formSelect',
  props: {
    title: {
      type: String,
      default: ''
    },
    selectData: {
      type: Array,
      default: () => {}
    },
    content: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: [],
      selectval: '',
      selectLable: {},
      ww: '90%'
    }
  },
  methods: {
    // 获取用户列表树形结构list
    geUserList() {
      this.$axios
        .post('/product/getUserInfoList')
        .then(res => {
          let result = res.data.result
          this.data = []
          for (let i in result) {
            this.data.push({
              id: result[i].userId,
              lable: result[i].realName
            })
          }
          this.setSelectLable(this.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取平台列表树形结构list
    getterraceList() {
      this.$axios
        .get('/getProductTreeBeanList?status=1')
        .then(res => {
          this.data = res.data.result
          this.setSelectLable(this.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取热点事件
    gethoteven() {
      if (this.formData.platform === '') {
        this.data = []
      } else {
        this.$axios
          .post('/getHoteventTreeBeanList?productId=' + this.formData.platform)
          .then(res => {
            if (res.data.status === true) {
              this.data = res.data.result
            }
            this.setSelectLable(this.data)
          })
      }
    },
    // 获取全部来源采集配置下拉列表
    getaffilialist() {
      this.$axios.post('/getCrawlServiceMapIdName').then(res => {
        this.data = res.data.result
        this.setSelectLable(this.data)
      })
    },
    handleValue() {
      let params = {
        types: [],
        datas: [this.selectval, this.selectLable[this.selectval]]
      }
      switch (this.type) {
        case '5':
          params = {
            title: this.selectval,
            titleLable: this.selectLable[this.selectval]
          }
          break
        case '6':
          params = {
            condition: this.selectval,
            conditionLable: this.selectLable[this.selectval]
          }
          break
        case '8':
          params = {
            username: this.selectval,
            usernameLable: this.selectLable[this.selectval]
          }
          break
        case '9':
          params = {
            platform: this.selectval,
            platformLable: this.selectLable[this.selectval]
          }
          break
        case '10':
          params = {
            hot: this.selectval,
            hotLable: this.selectLable[this.selectval]
          }
          break
        case '12':
          params = {
            gather: this.selectval,
            gatherLable: this.selectLable[this.selectval]
          }
          break
        case '14':
          params = {
            affiliation: this.selectval,
            affiliationLable: this.selectLable[this.selectval]
          }
          break
        case '16':
          params = {
            site: this.selectval,
            siteLable: this.selectLable[this.selectval]
          }
          break
        case '18':
          params = {
            err: this.selectval,
            errLable: this.selectLable[this.selectval]
          }
          break
        case '19':
          params = {
            sensitive: this.selectval,
            sensitiveLable: this.selectLable[this.selectval]
          }
          break
        case '21':
          params = {
            websType: this.selectval
          }
          break
      }
      this.setNewFormData(params)
    },
    setSelectLable(list) {
      for (let i in list) {
        if (this.type === '12') {
          this.selectLable[list[i].serviceId] = list[i].serviceName
        } else this.selectLable[list[i].id] = list[i].lable
      }
    },
    init() {
      switch (this.type) {
        case '12':
          this.selectval = Number(this.formData.gather)
          this.getaffilialist()
          break
        case '5':
          this.selectval = this.formData.title
          this.setSelectLable(this.selectData)
          break
        case '6':
          this.selectval = this.formData.condition
          this.setSelectLable(this.selectData)
          break
        case '8':
          this.selectval = this.formData.username
          this.geUserList()
          break
        case '9':
          this.selectval = this.formData.platform
          this.getterraceList()
          break
        case '10':
          this.selectval = this.formData.hot
          this.setSelectLable(this.selectData)
          break
        case '14':
          this.selectval = this.formData.affiliation
          this.setSelectLable(this.selectData)
          break
        case '16':
          this.selectval = this.formData.site
          this.setSelectLable(this.selectData)
          break
        case '18':
          this.selectval = this.formData.err
          this.setSelectLable(this.selectData)
          break
        case '19':
          this.selectval = this.formData.sensitive
          this.setSelectLable(this.selectData)
          break
        case '21':
          this.selectval = this.formData.websType
          this.setSelectLable(this.selectData)
          break
      }
    },
    ...mapMutations('charts', ['setNewFormData'])
  },
  computed: {
    ...mapState('charts', ['formData', 'chartsCondition', 'resetFormData'])
  },
  watch: {
    'formData.platform'(newval) {
      switch (this.type) {
        case '10':
          this.gethoteven()
          break
      }
    },
    resetFormData() {
      this.init()
    }
  },
  mounted() {
    this.data = this.selectData
    this.init()
  }
}
</script>

<style scoped></style>
